<template>
    <!-- 退出登录 -->
    <el-container>
          <el-header>
            <div>
              <img src="../assets/heima.png" alt="">
              <span>电商后台管理系统</span>
            </div>
                <el-button type="info" @click="loginout">退出</el-button>
          </el-header>
          <!-- 页面主体 -->
              <el-container>
                <!-- 左侧主体 -->
                <el-aside :width="istoggle ? '64px' : '200px'">
                   <!-- 侧边栏菜单 -->
                   <div class="toggle-button" @click="toggle">|||</div>
                    <!-- 保持菜单之展开一个 -->
              <el-menu
                      background-color="#333744"
                      text-color="#fff"
                      :collapse='istoggle'
                      :collapse-transition="false"
                      unique-opened
                      :router="true"
                      :default-active="activepath"
                      active-text-color="#409BFF">
                      <!-- 一级菜单 -->
                                <!-- 需要拼接一个""来实现               第一层循环 -->
                      <el-submenu :index="item.id+''" v-for="(item,key) in menulist" :key="key">
                        <!-- 一级菜单的模板区 -->
                        <template slot="title">
                            <i :class="icon[item.id]"></i>
                            <span>{{item.authName}}</span>
                        </template>
                        <!-- 二级菜单单 -->
                                            <!-- 第二层循环          循环第一层数据     数据项     -->
                       <el-menu-item :index="'/'+menulist.path" v-for="menulist in item.children" :key="menulist.id" @click="save('/'+menulist.path)">
                          <template slot="title">
                              <i class="el-icon-menu"></i>
                              <span>{{menulist .authName}}</span>
                          </template>
                       </el-menu-item>
                        
                      </el-submenu>
                     
              </el-menu>
                </el-aside>
                <!-- 右侧主体 -->
                <el-main>
                          <!-- 右侧内容展示 -->
                          <router-view></router-view>
                </el-main>
              </el-container>
    </el-container>
</template>
<script>
export default {
  name: 'Shouye',
  data() {
    return {
      // 左菜单数据
        menulist:[],
        icon:{
          '125':'iconfont icon-users',
          '103':'iconfont icon-tijikongjian',
          '101':'iconfont icon-shangpin',
          '102':'iconfont icon-danju',
          '145':'iconfont icon-baobiao'
        },
        istoggle:false,
        // 被激活的链接地址
        activepath:''
    }
  },
  created(){
    this.ajiaxlist()
    this.activepath=window.sessionStorage.getItem("active")
  },
  methods: {
    // 退出的登录
    loginout() {
      // 将token的数据清空并且跳转到登录页
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    // 获取所有的菜单
    async ajiaxlist(){
      let {data:res}=await this.$axios.get("menus")
      // console.log(res)
      if(res.meta.status!==200) return $message.error(res.meta.msg)
      this.menulist=res.data
    },
    // 按钮条菜单折叠与展开效果
    toggle(){
      this.istoggle=!this.istoggle
    },
    // 保存链接的激活状态
    save(activepath){
      window.sessionStorage.setItem("active",activepath)
      // 从新赋值获得高亮
      this.activepath=activepath
    }
  }
}
</script>
<style lang="scss" scoped>
body,h1,h2,h3,h4,h5,h6,p{
  margin: 0;
  padding: 0;
  list-style: none;
}
body,html,#app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.el-container{
  height: 100%;
}
.el-header{
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  background: #373d41;
  color: #fff;
  font-size: 20px;
  >div{
    display: flex;
    align-items: center;
    span{
      margin-left: 15px;
    }
  }
}
.el-aside{
  background: #333744;
}
.el-main{
  background: #eaedf1;
}
.iconfont{
  margin-right: 10px;
}
.el-menu{
  border-right: none;
}
.toggle-button{
  background: #4A5064;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  // 让字体的间距加大
  letter-spacing: 0.2em;
  // 小手效果
  cursor: pointer;
}

</style>